<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>中餐区</title>
    <style type="text/css">
        /*CSS初始化*/
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:16px "微软雅黑","宋体";}
a{color:#14191e;text-decoration:none}
a:hover{color:#666;font-weight:bold}
em{font-style:normal}
li{list-style:none}
/*img{border:0;vertical-align:middle}*/
input{
    outline: none;
}
/*CSS初始化结束*/
/*头部开始*/
header{
    width: 100%;
    height: 80px;
}
/*body{*/
    /*height: 4000px;*/
/*}*/
.logo{
    float: left;
    width: 300px;
    height: 80px;
}
header .nav{
    float: left;
    width: 500px;
    display: flex;
}
header .nav ul{
    float: left;
    text-align: center;
}
header .nav ul li{
    display: inline;
    float: left;
    width: 100px;

}
header .nav ul li a{
    display: inline-block;
    float: left;
    padding-left:25px;
    height: 80px;
    line-height: 80px;
}
.search{
    float: left;
    width: 300px;
    height: 50px;
    margin: 15px 15px;
    position: relative;
}
.search input{
    width: 260px;
    height: 40px;
    border-top:none;
    border-left:none;
    border-right:none;
}
.search img{
    float: right;
    width: 20px;
    margin: 10px 0;
    position: absolute;
    top: 5px;
    right: 10px;
}
.login{
    float: right;
    width: 219px;
    display: flex;
    flex-direction:row;
}
.login li{
    display: inline-block;
    flex: 1;
    padding-left: 27px;
}
.login li a{
    height: 50px;
    line-height: 50px;
    float: right;
    margin-top: 15px;
}
/*头部结束*/
/*留言部分开始*/
.lunch{
    width: 1090px;
    height: 650px; 
    margin: 10px auto;   
}
.l-t{
    color: #f01400;
    font-size: 40px;
    padding-bottom: 10px;
}
.l-b{
    height: 600px;
    background-color: #f6f6f6;
    border: 1px solid #999;
}
.one ul li,.two ul li{
    display: block;
    float: left;
    margin: 10px 8px;
    width: 250px;
    height: 250px;
    padding-bottom: 25px;
}
.one ul li p,.two ul li p{
    text-align: center;
    color-size: 18px;
}
/*留言部分结束*/
/*底部开始*/
.line{
    width: 85%;
    border-top: 1px solid #666;
    margin: 30px auto 0;
    color: #ff7631;
    padding: 15px;
}
footer p{
    text-align: center;
    font-size: 15px;
    font-weight: 700;
}
footer a{
    font-size: 14px;
    color: #999;
}
.copyright{
  text-align: center;
    color: #999;
    font-size: 14px;
    margin-top: 15px;
}
/*底部结束
    </style>
</head>
 <!--头部开始-->
    <header>
        <div class="logo"><img src="images/logo.jpg" alt=""></div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">菜谱</a></li>
                <li><a href="#">加入我们</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text">
            <img src="images/search.png">
        </div>
        <div class="login">
            <ul>
                <li><a href="register.html">注册</a></li>
                <li><a href="login.html">登录</a></li>
                <li><a href="#">退出</a></li>
            </ul>
        </div>
    </header>
        <!--头部结束-->
        <!-- 中餐推荐部分开始 -->
        <div class="lunch">
            <div class="l-t">中餐推荐组合</div>
            <div class="l-b">
                <div class="one">
                     <ul>
                    <li><a href="#"><img src="images/lunch/1.png" alt=""></a>
                        <a href="#"><p>煎鸡胸能量午餐</p></a>
                    </li>
                    <li><a href="#"><img src="images/lunch/2.png" alt=""></a>
                        <a href="#"><p>香菇焖饭轻体午餐</p></a>
                    </li>
                    <li><a href="#"><img src="images/lunch/3.png" alt=""></a>
                        <a href="#"><p>香菇油菜减脂午餐</p></a>
                    </li>
                    <li><a href="#"><img src="images/lunch/4.png" alt=""></a>
                        <a href="#"><p>荞麦面塑性午餐</p></a>
                    </li>
                </ul>
                </div>
                 <div class="two">
                     <ul>
                    <li><a href="#"><img src="images/lunch/5.png" alt=""></a>
                        <a href="#"><p>糙米饭减脂午餐</p></a>
                    </li>
                    <li><a href="#"><img src="images/lunch/6.png" alt=""></a>
                        <a href="#"><p>蛋包饭牛肉沙拉塑形午餐</p></a>
                    </li>
                    <li><a href="#"><img src="images/lunch/7.png" alt=""></a>
                        <a href="#"><p>菠萝炒饭减脂午餐</p></a>
                    </li>
                    <li><a href="#"><img src="images/lunch/8.png" alt=""></a>
                        <a href="#"><p>沙拉意面减脂午餐</p></a>
                    </li>
                </ul>
                </div>
            </div>
        </div>
        <footer>
        <!--底部开始-->
        <div class="line"><h3>走胃更走心---吃得健康又营养!</h3></div>
        <p class="link">友情链接:
            <a href="http://life.iqiyi.com/">爱奇艺生活</a>
            <a href="http://www.zhms.cn/">中华美食网</a>
            <a href="http://www.pcbaby.com.cn/">太平洋亲子网</a>
            <a href="http://food.poco.cn/">POCO美食网</a>
            <a href="http://www.21food.cn/">食品商务网</a>
            <a href="http://www.mama.cn/">妈妈网</a>
            <a href="http://www.39yst.com/">三九养生堂</a>
            <a href="http://www.258.com/">企业服务平台</a>
            <a href="http://www.yidianzixun.com/">一点资讯</a>
            <a href="http://www.hc360.com/">慧聪网</a>
        </p>
        <p class="copyright">版权所有 © 2004-2019 走心更走胃 保留所有权利</p>
        <!--底部结束-->
    </footer>
</body>
</html>